<template>
  <div id="Monitor_point" class="shadow-box">
    <!-- 项目结构及信息 -->
    <div class="middle">
      <div class="tree">
        <!-- 项目树 -->
        <div class="slide">
          <div class="title">监控点</div>
          <div class="container">
            <!-- 项目树 -->
              <ProjectTree></ProjectTree>
          </div>
        </div>
      </div>
      <div class="areainfo">
        <div class="slide">
          <div class="title">沉降记录</div>
          <div class="container">
            <!-- 写个表格 -->
            <div class="position_box">
              <el-table :data="select_project" style="width: 100%">
                <el-table-column prop="data" label="时间" width="180"> </el-table-column>
                <el-table-column prop="name" label="点名称"> </el-table-column>
                <el-table-column prop="address" label="地址"> </el-table-column>
                <el-table-column prop="address" label="操作">
                  <template slot-scope="scope">
                    <el-button size="mini" @click="scope.row">详情</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div class="position_btn">
                <el-button class="w100" @click="look_surface()">表形式查看</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 弹框，展示 eharts -->
      <Surface :show="surface_show" @exit="surface_show = false"></Surface>
    </div>
  </div>
</template>

<script>
import Surface from '../../components/Monitor/surface.vue'
import ProjectTree from '../../components/Monitor/project_tree.vue'
export default {
  name: 'Monitor_point',
  data() {
    return {
      surface_show: false,
      pros_table: null,
      select_project: [],
    }
  },
  components: {
    Surface,
    ProjectTree,
  },
  methods: {
    //   项目表格行单击
    project_table_row_click(row) {
      console.log(row)
      //   this.select_project = row.data
    },
    //   以表的形式查看
    look_surface() {
      this.surface_show = true
    },
  },
  mounted() {},
  destroyed() {
    this.$ebs.$off('selectProject_change')
  },
}
</script>

<style lang="scss" scoped>
#Monitor_point {
  width: 100%;
  height: 100%;

  .filter {
    width: 100%;
    height: 65px;
    overflow: hidden;
    overflow-x: auto;
  }

  .middle {
    width: 100%;
    // height: calc(100% - 65px);
    height: 100%;
    display: flex;
    justify-content: space-between;

    & > div {
      overflow: hidden;
      overflow-y: auto;
      box-sizing: border-box;
      padding: 0 10px 0 0;
    }

    .tree {
      width: 300px;
      height: 100%;

      .slide {
        height: 100%;
      }
    }

    .areainfo {
      flex: 1;
      height: 100%;

      .slide {
        &:last-child {
          height: 100%;
        }
      }
    }

    .slide {
      width: 100%;

      .title {
        height: 38px;
        display: flex;
        align-items: center;
        font-size: 24px;
        border-bottom: 2px solid #006886;
        margin-bottom: 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .container {
        width: 100%;
        height: calc(100% - 50px);
        box-sizing: border-box;
        position: relative;
        padding: 10px;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
        overflow-y: auto;
        .position_box {
          position: relative;
          .position_btn {
            position: absolute;
            top: 0;
            right: 0;
          }
        }
      }
    }
  }
}
</style>
